/*
*大赛列表
CompetitionList.js*/

import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { 
	Row,
	Col,
	Button,
	List,
	Progress,
	Icon,
	Popover,
	Radio  
} from 'antd';
import AddGame from './AddGame';

import style from './competitionList.less';
/*
*fundGameList [比赛列表]
*/
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

class CompetitionList extends React.Component{
	state={
		"author":'',
		"status":''
	}
	onChange=(e)=> {
		console.log('11234',this.props.privateGame)
		const { gameName,qbeginDate,qendDate } =this.props.privateGame;
		this.setState({
			'status':e.target.value,
		})
		if(e.target.value == '全部' && gameName == ''
	  	&& qbeginDate == ''&& qendDate == ''){
			this.props.dispatch({
				type:'privateGame/fundCompetition',
			})
		}else if(e.target.value == '全部' && gameName !== ''
	  	&& qbeginDate !== ''&& qendDate !== ''){
	  	this.props.dispatch({
				type:'privateGame/fundCompetition',
				payload:{
					'name': gameName ,
					'beginDate': qbeginDate ,
					'endDate': qendDate,
				}
			})
	  }else if(e.target.value == '全部' && gameName == ''
	  	&& qbeginDate !== ''&& qendDate !== ''){
	  	this.props.dispatch({
				type:'privateGame/fundCompetition',
				payload:{
					'beginDate': qbeginDate ,
					'endDate': qendDate,
				}
			})
	  }else if(gameName == ''&& qbeginDate == ''&& qendDate == ''){
		  this.props.dispatch({
				type:'privateGame/fundCompetition',
				payload:{
					'status':e.target.value,
				}
			})
		}else if(gameName !== ''&& qbeginDate == ''&& qendDate == ''){
			this.props.dispatch({
				type:'privateGame/fundCompetition',
				payload:{
					'status':e.target.value,
					'name':gameName
				}
			})
		}else if(gameName == ''&& qbeginDate !== ''&& qendDate !== ''){
			this.props.dispatch({
				type:'privateGame/fundCompetition',
				payload:{
					'status':e.target.value,
					'beginDate': qbeginDate ,
					'endDate': qendDate,
				}
			})
		}else if(gameName !== ''&& qbeginDate !== ''&& qendDate !== ''){
			this.props.dispatch({
				type:'privateGame/fundCompetition',
				payload:{
					'status':e.target.value,
					'name':gameName,
					'beginDate': qbeginDate ,
					'endDate': qendDate,
				}
			})
		}
	}

	onClick=(v)=>{
		const idARR = [];
		const {fundGameList} = this.props.privateGame;
		fundGameList.map((item)=>{
			idARR.push(item.id)
		});
		idARR.map(i=>{
			if(i == v){
				const ele = document.getElementById(v);
		    //ele.style.backgroundColor = 'gray';
			ele.style.backgroundColor = '#e8f0ff';
			}else{
				const ele = document.getElementById(i);
		    ele.style.backgroundColor = 'white';
			}
		});
		this.props.dispatch({
			type:'privateGame/getGameDetails',
			payload:{
				id:v,
			}
		});
		this.props.dispatch({
			type:'privateGame/setState',
			payload:{
				isShow:false,
			}
		});
		this.props.dispatch({
			type:'privateGame/getDepartment'
		});
		this.props.dispatch({
			type:'privateGame/getEnrollGame',
			payload:{
				id:v
			}
		});
		this.props.dispatch({
			type:'privateGame/getsmmcAlxr'
		})
	}
	onUpClick=()=>{
		console.log('112345',this.props.privateGame)
		const { gameName,qbeginDate,qendDate } =this.props.privateGame;
		const {status} = this.state;
		const ele = document.getElementById('caret-up');
		const ele2 = document.getElementById('caret-down');
		if(ele){
			ele.style.color = '#1890ff';
			ele2.style.color = '#a5b0bf';
		}
		
		if(status !==''){
			if(gameName == ''&& qbeginDate == ''&& qendDate == ''){
			  this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'status':status
					}
				})
			}else if(gameName !== ''&& qbeginDate == ''&& qendDate == ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'name': gameName,
						'status':status
					}
				})
			}else if(gameName == ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'beginDate': qbeginDate ,
						'endDate': qendDate,
						'status':status
					}
				})
			}else if(gameName !== ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'name': gameName,
						'beginDate': qbeginDate ,
						'endDate': qendDate,
						'status':status
					}
				})
			}
		}else{
			if(gameName == ''&& qbeginDate == ''&& qendDate == ''){
			  this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
					}
				})
			}else if(gameName !== ''&& qbeginDate == ''&& qendDate == ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'name': gameName,
					}
				})
			}else if(gameName == ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'beginDate': qbeginDate ,
						'endDate': qendDate,
					}
				})
			}else if(gameName !== ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'ascend',
						'name': gameName,
						'beginDate': qbeginDate ,
						'endDate': qendDate,
					}
				})
			}
		}
		
		
	}
	onDownClick=()=>{
		console.log('112345',this.props.privateGame)
		const { gameName,qbeginDate,qendDate } =this.props.privateGame;
		const {status} = this.state;
		const ele = document.getElementById('caret-up');
		const ele2 = document.getElementById('caret-down');
		if(ele2){
			ele2.style.color = '#1890ff';
			ele.style.color = '#a5b0bf';
		}
		if(status !==''){
			if(gameName == ''&& qbeginDate == ''&& qendDate == ''){
			  this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'status':status
					}
				})
			}else if(gameName !== ''&& qbeginDate == ''&& qendDate == ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'name': gameName,
						'status':status
					}
				})
			}else if(gameName == ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'beginDate': qbeginDate ,
						'endDate': qendDate,
						'status':status
					}
				})
			}else if(gameName !== ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'name': gameName,
						'beginDate': qbeginDate ,
						'endDate': qendDate,
						'status':status
					}
				})
			}
		}else{
			if(gameName == ''&& qbeginDate == ''&& qendDate == ''){
			  this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
					}
				})
			}else if(gameName !== ''&& qbeginDate == ''&& qendDate == ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'name': gameName,
					}
				})
			}else if(gameName == ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'beginDate': qbeginDate ,
						'endDate': qendDate,
					}
				})
			}else if(gameName !== ''&& qbeginDate !== ''&& qendDate !== ''){
				this.props.dispatch({
					type:'privateGame/fundCompetition',
					payload:{
						'order':'descend',
						'name': gameName,
						'beginDate': qbeginDate ,
						'endDate': qendDate,
					}
				})
			}
		}
		
	}
	componentWillMount() {
		const { login } = this.props;
		console.log('>>>>',login,this.props)
		const authorities = login.userInfo.authorities;
		if(!_.isEmpty(login.userInfo)){
			
			login.userInfo.authorities.map((i)=>{
				if(i == 'ROLE_HEADQUARTERSDOCKING' || i=='ROLE_ADMIN'){
					this.setState({
						"author":'0',
					})
				}else if(i == 'ROLE_BRANCHDOCKING'){
					this.setState({
						"author":'2',
					})
				}else{
					this.setState({
						"author":'1',
					})
				}
			})
		}
	}
	
	

	render(){
		const {fundGameList} = this.props.privateGame;
		const {author} =this.state;
		console.log('CompetitionList>>',this.props)
		const content = (
		  <RadioGroup onChange={this.onChange}>
		 		<RadioButton value="全部">全部</RadioButton>
	      <RadioButton value="草稿">草稿</RadioButton>
	      <RadioButton value="进行中">进行中</RadioButton>
	      <RadioButton value="已结束">已结束</RadioButton>
	    </RadioGroup>
		);
		// if(author == '0'){
			return(
				<List
					className={style.listArr}
				 	bordered
				 	header={<Row type="flex">
				 		<Col span={12}>
				 			<span>开始时间</span>
				 			<div className={style.sorterBtn}>
				 				<Icon type="caret-up" id="caret-up" onClick={this.onUpClick}/>
				 				<Icon type="caret-down" id="caret-down" onClick={this.onDownClick}/>
				 			</div>
				 		</Col>
				 		<Col span={6} className={style.filterBtn}>
				 			<Popover trigger="click" content={content}>
					      <span className="all-state">全部状态</span>
				 				<Icon type="filter"  />
					    </Popover>
				 		</Col>
				 		{
				 			author == '0'?<Col span={6}>
					 			<AddGame/>
					 		</Col>:null
				 		}
				 	</Row>}
			    itemLayout="horizontal"
			    dataSource={fundGameList}
			    renderItem={item => (
			      <List.Item id={item.id} className={style.listArr2}>
			        <List.Item.Meta
			        	key={item.id}
			          title={<div>
			          	{
			          		item.status=='草稿'?<Row type="flex" >
			          			<Col span={12}><span className="game-name">{item.name}</span></Col>&nbsp;&nbsp;
			          			{/*<Col span={3} ><span style={{color:'green'}}>{item.status}</span></Col>*/}
								  <Col span={3} ><span style={{color:'#00CD1D'}}>{item.status}</span></Col>
			          		</Row>:<Row type="flex" >
			          			<Col span={12}><span className="game-name">{item.name}</span></Col>&nbsp;&nbsp;
			          			{/*<Col span={4} ><span style={{color:'DodgerBlue'}}>{item.status}</span></Col>&nbsp;*/}
								  <Col span={4} ><span style={{color:'#4d86ff'}}>{item.status}</span></Col>&nbsp;
			          			<Col span={6}><Progress percent={50} size="small" showInfo={false}/></Col>
			          		</Row>
			          	}
			          	<Row type="flex">
			          		<Col span={16}><span>时间:{item.beginDate}~{item.endDate}</span></Col>
			          		<Col span={8}><span>赛区:{item.numOfDivision}</span></Col>
			          	</Row>
			          </div>}
			          onClick={()=>this.onClick(item.id)}
			        />
			      </List.Item>
			    )}
			  />
			)
		// }
	}
}

export default connect(({privateGame,login})=>({privateGame,login}))(CompetitionList)